<template>
  <div class="Create-container">
    <!-- 导航栏 -->
    <div class="nav-contianer">
      <van-nav-bar
        title="新建比赛"
        right-text="创建"

        @click-right="onClickRight"
      >
      </van-nav-bar>
    </div>
    <br>
    <!-- 文本输入栏 -->
    <div class="text_container">

      <!-- 输入主队 -->
      <van-field v-model="obj.text1" label="主队" placeholder="都江堰中学1"/>
      <!-- 输入客队 -->
      <van-field v-model="obj.text2" type="text" label="客队" placeholder="都江堰中学2"/>

      <br>

      <!--时间弹出层 -->
      <van-popup v-model="timeShow" :style="{width:'80%'}">
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          title="选择完整时间"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="confirmFn"
          @cancel="cancelFn"
        />
      </van-popup>
      <!-- 输入时间 -->
      <van-field v-model="obj.time" type="text" label="时间" :placeholder=this.obj.time @click="timeShow = !timeShow"/>

      <!-- 阶段弹出层 -->
      <van-popup v-model="stateShow" :style="{width:'80%'}">
        <van-picker
          title="标题"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-popup>
      <!-- 输入阶段 -->
      <van-field v-model="obj.state" type="text" label="阶段" placeholder="冠亚军决赛" @click="stateShow = !stateShow"/>

      <!-- 场地出层 -->
      <van-popup v-model="dressShow" :style="{width:'80%'}">
        <van-area title="场地" :area-list="areaList"  @confirm ='sendAdress'/>
      </van-popup>
      <!-- 输入场地 -->
      <van-field v-model="obj.dress" type="text" label="场地" placeholder="都江堰市，成都东软学院" @click="dressShow = !dressShow"/>
      <!-- 详细场地 -->
      <van-field v-model="obj.xxdress" type="text" label="详细地址" placeholder="飞龙体育馆"/>
    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import { mapState } from 'vuex'
export default {
  name: 'CP-Create',
  data() {
    return {
      dressShow: false,
      stateShow: false,
      timeShow: false,
      //  阶段选择器
      columns: ['小组赛', '淘汰赛', '热身赛', '全明星', '三、四名决赛', '冠亚军决赛'],

      obj: {
      // 输入框的数据
        text1: '', // 队伍1
        text2: '', // 队伍2
        time: '', // 时间 年月日
        time1: '', // 时间  时分
        state: '', // 阶段
        dress: '', // 地址
        xxdress: '' // 详细地址
        // logoindex: ''
      },
      // 时间组件的数据
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      // 地点组件的数据
      areaList
    }
  },
  computed: {
    ...mapState(['CreateLeague_obj'])
  },
  methods: {
    // 导航栏
    onClickRight() {
      console.log(this.obj)
      this.$store.commit('create_function', this.obj)
      this.$toast('创建成功')
    },
    // ........................................................
    // 阶段选择器

    confirmFn() { // 确定时间
      this.obj.time = this.timeFormat(this.currentDate)
      this.obj.time1 = this.timeFormat1(this.currentDate)

      this.timeShow = false
      console.log(this.obj.time)
    },
    cancelFn() { // 取消时间
      this.show = true
    },
    timeFormat(time) { // 时间格式化 2019-09-08
      const year = time.getFullYear()
      const month = time.getMonth() + 1// 获取系统日，
      const day = time.getDate() // 天
      return year + '年' + month + '月' + day + '日'
    },
    timeFormat1(time) { // 时间格式化 2019-09-08
      const hours = time.getHours() // 时
      const minute = time.getMinutes() // 分
      return hours + ':' + minute
    },

    // ........................................................
    // 阶段选择器
    onConfirm(value, index) {
      this.obj.state = value
      this.$toast(`当前值：${value}, 当前索引：${index}`)
      this.stateShow = !this.stateShow
    },
    onChange(picker, value, index) {
      this.state = value
      this.$toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel() {
      this.$toast('取消')
      this.stateShow = !this.stateShow
    },

    // ........................................................
    // 场地选择器
    sendAdress(value, index) {
      const province = value[0].name
      const city = value[1].name
      const area = value[2].name
      this.obj.dress = province + city + area
      this.dressShow = !this.dressShow
    }

  },
  mounted() {
    this.timeFormat(new Date())
  }

}
</script>

<style scoped>
.van-nav-bar{
  height: 12vw;
  background-color: black;
}
::v-deep .van-icon-arrow-left,::v-deep .van-nav-bar__text,::v-deep .van-nav-bar__title,::v-deep .van-nav-bar__text{
  color: white;
}
.updata_logo{
  width: 60vw;
  /* background-color: antiquewhite; */
}

::v-deep .updata_logo{
  padding: 0;
}
</style>>
